<script setup>
import {reactive, ref, watch, watchEffect} from "vue";

let firstName = ref('')
let lastName = reactive({
  name: ''
})
let fullName = ref('')
//监听ref响应式的数据
// watch(firstName,(oldName,newName)=>{
//   console.log(`${oldName}变成${newName}`)
//   fullName.value = firstName.value+lastName.name
// })
//
// //监听reactive响应式的数据
// watch(()=>lastName.name,(oldName,newName)=>{
//   console.log(`${newName}变为${oldName}`)
//   fullName.value = firstName.value+lastName.name
// })

//使用watchEffect去进行监听
watchEffect(()=>{
  console.log(firstName.value)
  console.log(lastName.name)
  fullName.value = firstName.value+lastName.name
})

</script>

<template>
  <div>
    全名为：{{ fullName }}
    姓氏：<input type="text" v-model="firstName">
    名字：<input type="text" v-model="lastName.name">
  </div>
</template>

<style scoped>

</style>